<template>
	<view>
		<view class="search-container">
			<u-search class="search-box" placeholder="请输入关键字" :show-action="false"></u-search>
		</view>
		<view class="category-container">
			<u-tabs active-color="#ff7670" :list="categoryList" name="categoryName" :is-scroll="true" v-model="current"
				@change="change"></u-tabs>
		</view>
		<view>
			<u-waterfall v-model="flowList" ref="uWaterfall1">
				<template v-slot:left="{leftList}">
					<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
						<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
						<u-lazy-load threshold="-450" border-radius="10" :image="item.image"
							:index="index"></u-lazy-load>
						<view class="demo-title">
							{{item.title}}
						</view>
						<view class="demo-price">
							{{item.price}}元
						</view>
						<view class="demo-tag">
							<view class="demo-tag-owner">
								自营
							</view>
							<view class="demo-tag-text">
								放心购
							</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
						<u-lazy-load threshold="-450" border-radius="10" :image="item.image"
							:index="index"></u-lazy-load>
						<view class="demo-title">
							{{item.title}}
						</view>
						<view class="demo-price">
							{{item.price}}元
						</view>
						<view class="demo-tag">
							<view class="demo-tag-owner">
								自营
							</view>
							<view class="demo-tag-text">
								放心购
							</view>
						</view>
					</view>
				</template>
			</u-waterfall>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	const categoryList = ref([{
		id: 0,
		categoryName: '全部'
	}, {
		id: 1,
		categoryName: '手机'
	}, {
		id: 2,
		categoryName: '电脑'
	}, {
		id: 3,
		categoryName: '衣服'
	}, {
		id: 4,
		categoryName: '鞋子'
	}, {
		id: 5,
		categoryName: '图书'
	}, {
		id: 6,
		categoryName: '时尚'
	}, {
		id: 7,
		categoryName: '餐具'
	}, {
		id: 8,
		categoryName: '数码'
	}])
	const current = ref(0)
	const change = ((index) => {
		console.log("index", index);
	})

	const flowList = ref([{
			id: 1,
			price: 75,
			title: '手机',
			image: '/static/11.jpg',
			categoryId: 1
		},
		{
			id: 2,
			price: 385,
			title: '笔记本电脑',
			image: '/static/22.jpeg',
			categoryId: 2
		},
		{
			id: 3,
			price: 784,
			title: '耳机',
			image: '/static/33.jpeg',
			categoryId: 8,
		},
		{
			id: 4,
			price: 7891,
			title: '手表',
			image: '/static/44.jpg',
			categoryId: 8
		},
		{
			id: 5,
			price: 2341,
			title: '养身壶',
			image: '/static/66.jpeg',
			categoryId: 7
		},
		{
			id: 6,
			price: 2342,
			title: '手表',
			image: '/static/55.jpg',
			categoryId: 8
		},
		{
			id: 7,
			price: 2341,
			title: '手机',
			image: '/static/11.jpg',
			categoryId: 1
		},
		{
			id: 8,
			price: 2342,
			title: '电脑',
			image: '/static/22.jpeg',
			categoryId: 2
		}
	]);
</script>

<style lang="scss" scoped>
	.category-container {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 99;
	}
	.search-box {
		margin: 20rpx;
	}

	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}
</style>